<template>
  <el-card>
    <el-row :gutter="20" class="fdr">
      <el-col :span="12">
        <el-container class="fdc" style="margin-top: 0px">
          <!--图表-->
          <div style="display: flex;flex: 1;width: 100%">
            <div id="main"></div>
          </div>
        </el-container>
      </el-col>
      <el-col :span="12">
        <el-container class="fdc" style="margin-top: 10px">
          <el-row :gutter="20" class="fdr">
            <el-col :span="24">
              <h4 style="margin-bottom: 5%">统计数据</h4>
            </el-col>
            <el-col :span="12">
              <el-card shadow="hover" class="box-card c1">
                <template #header>
                  <h3 class="t1">待付款</h3>
                </template>
                <div type="dashboard">
                  <h1>{{ obligationOrder }}</h1>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card shadow="hover" class="box-card c2">
                <template #header>
                  <h3 class="t2">待发货</h3>
                </template>
                <div type="dashboard">
                  <h1>{{ deliverOrder }}</h1>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card shadow="hover" class="box-card c3">
                <template #header>
                  <h3 class="t3">订单数</h3>
                </template>
                <div type="dashboard">
                  <h1>{{ sumOrder }}</h1>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card shadow="hover" class="box-card c5">
                <template #header>
                  <h3 class="t3">今日订单数</h3>
                </template>
                <div type="dashboard">
                  <h1>{{ dayOrder }}</h1>
                </div>
              </el-card>
            </el-col>
          </el-row>

        </el-container>
      </el-col>
    </el-row>
  </el-card>
</template>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@import '@/styles/variables.module.scss';

$success: #67c23a;
$warning: #e6a23c;
$danger: #f56c6c;
$primary: #409eff;
p {
  line-height: 30px;
  font-family: PingFangSC-Regular, "PingFang SC";
  font-weight: 400;
  font-size: 16px;
  color: #333;
}

.box-card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 13px;
  height: 10rem;

}

.c1 {
  box-shadow: 3px 3px 10px $success;
}

.c2 {
  box-shadow: 3px 3px 10px;
  box-shadow: 3px 3px 10px $primary;
}

.c3 {
  box-shadow: 3px 3px 10px $warning;
}

.c4 {
  box-shadow: 3px 3px 10px #909399;
}

.c5 {
  box-shadow: 3px 3px 10px $danger;
}

.fdr {
  display: flex;
  flex-direction: row;
}

.fdc {
  display: flex;
  flex-direction: column;
}

.t1 {
  width: 1rem;
  color: $success;
}

.t2 {
  width: 1rem;
  color: $primary;

}

.t3 {
  width: 1rem;
  color: $warning;

}

#main {
  width: 100%;
  min-height: 40rem;

}

</style>

<script setup>
import {ref, onMounted} from "vue";
import * as echarts from "echarts";
import {
  getDayOrderAPI,
  getDeliverOrderAPI,
  getObligationOrderAPI,
  getSumOrderAPI,
  getWeekOrderAPI
} from "@/api/statisticsManage.js";
//总
const sumOrder = ref(0)
//未付
const obligationOrder = ref(0)
//待发货
const deliverOrder = ref(0)
//今日订单数
const dayOrder = ref(0)
const getSumOrder = async () => {
  const res = await getSumOrderAPI()
  sumOrder.value = res.data
}
const getObligationOrder = async () => {
  const res = await getObligationOrderAPI()
  obligationOrder.value = res.data
}
const getDeliverOrder = async () => {
  const res = await getDeliverOrderAPI()
  deliverOrder.value = res.data
}

const getDayOrder = async () => {
  const res = await getDayOrderAPI()
  dayOrder.value = res.data
}

onMounted(() => getSumOrder())
onMounted(() => getObligationOrder())
onMounted(() => getDeliverOrder())
onMounted(() => getDayOrder())

const xData = ref([])
const yData = ref([])
const getWeekOrder = async () => {
  const res = await getWeekOrderAPI()
  res.data.forEach((weekOrder) =>{
    xData.value.push(weekOrder.pastDay)
    yData.value.push(weekOrder.orderTotal)
  })
  console.log("xdata",xData.value)
  console.log("ydata",yData.value)
}
onMounted(async () => {
  await getWeekOrder(); // 等待数据加载完成
  const chartDom = document.getElementById("main");
  const myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    toolbox: {
      feature: {
        magicType: {show: true, type: ["line", "bar"]},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    legend: {
      data: ["订单数"]
    },
    xAxis: [
      {
        type: "category",
        data:  xData.value,
        axisPointer: {
          type: "shadow"
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "订单数",
        min: 0,
        max: 5,
        interval: 1,
        axisLabel: {
          formatter: "{value} 单"
        }
      },
      {
        type: "value",
        name: "订单数",
        min: 0,
        max: 5,
        interval: 1,
        axisLabel: {
          formatter: "{value} 单"
        }
      }
    ],
    series: [
      {
        name: "订单数",
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + " 单";
          }
        },
        data: yData.value
      }
    ]
  };
  myChart.setOption(option);
})

/*const initChart = () => {
  console.log("initChart xdata",xData.value)
  console.log("initChart ydata",yData.value)
  const chartDom = document.getElementById("main");
  const myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    toolbox: {
      feature: {
        magicType: {show: true, type: ["line", "bar"]},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    legend: {
      data: ["订单数"]
    },
    xAxis: [
      {
        type: "category",
        data:  xData.value,
        axisPointer: {
          type: "shadow"
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "订单数",
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: "{value} 单"
        }
      },
      {
        type: "value",
        name: "订单数",
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: "{value} 单"
        }
      }
    ],
    series: [
      {
        name: "订单数",
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + " 单";
          }
        },
        data: yData.value
      }
    ]
  };
  option && myChart.setOption(option);
};
onMounted(() => {
  initChart();
});*/
</script>